<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding:0;
            margin: 0;

        }
        
        
        .a {
            
            background-color: aqua;
            height: 100px;  
        width:100%;  
         float: left;   
         list-style: none;   
         color:#fff;  
        } 
        .g{width:100%;background-color:aqua;}  
        
        .a h2 {
            font-weight: 400;
            margin-left: 20px;
            color: gray;
            margin-bottom: 20px;
        }
        a {
            font-size: 18px;
            text-decoration: none;
            color: gray;
        }
        a:hover {
            color: black;
        }
        .a .b {
            margin-left: 30px;
        }
        .c {
            height: 300px;
        }
        #ke{font-size: 30px;
                    text-align: center;
                    padding-top: 50px;}
        #lian{font-size: 30px;
                    text-align: center;
                    padding-top: 50px;}
        p {
            font-size: 3px;
            text-align: center;
            padding-top: 5px;
        }

        .e {
            margin-top: 50px;
        }
        .d .ads {
            width: 248px;
            text-align: center;
            font-size: 18px;
            display: inline-block;
            float: left;
        }
        .d .ads img {
            width:100%;
        }
        .d .lbnc {
            width: 205px;
            text-align: center;
            font-size: 18px;
            display: inline-block;
            float: right;
        }
        .d .lbnc img {
            width: 100%;
        }
        .d .newton {
            width: 200px;
            text-align: center;
            font-size: 18px;
            display: inline-block;
            float: left;
        }
        .d .newton img {
            width: 100%;
        }
        .d .tsl {
            width: 185px;
            text-align: center;
            font-size: 18px;
            display: inline-block;
            float: right;
        }
        .d .tsl img {
            width: 100%;
        }
        .clear {
            clear: both;
        }
        .g .call {
            font-size: 30px;
        }
        .fang {
            display: inline-block;
            float: left;
        }
        .online {
            display: inline-block;
            float: right;
        }
        .online h1 {
            font-weight: 400;
        }
    </style>
</head>
<body>
    <div class="a">
        <h2>我的响应式网站</h2>
        <div class="b">
        <a href="#cheng">乘法口诀表</a>
        <a href="#ke">科学家介绍</a>
        <a href="#lian">联系我们</a>
    </div>
</div>
    <script src="js/jquery.min.js" ></script>
        <title>九九乘法表</title>
        <style>
            body{
                display: flex;
                /* text-align: center; */
                flex-flow: column;
                align-items: center;
                justify-content: center;
            }
            .tbl{
                flex-flow: left;
                margin-bottom: 50px;
            }
            span{
                border: solid 3px;
                margin-left: 5px;
            }
            .tb2{
                display:inline-flex;
            }
            .tb2 div{
                text-align: center;
                width: 350px;
                height: 350px;
                border-radius: 22px;
                border: solid 5px;
            }
            .tb2 img{
                width: 100px;
                height: 100px;
            }
            .frm{
                margin: 50px auto 20px auto;
                display: flex;
            }
            .frm input[type="text"]{
                width: 35px;
                border:solid 5px;
                border-radius: 22px;
                text-align: center;
                outline: none;
            }
            input[type="button"]{
                border: solid 3px;
                border-radius: 22px;
                cursor: pointer;
            }
            .pass1{
                margin: 50px auto 50px auto;
            }
            .pass2{
                margin: 40px auto 50px auto;
            }
        </style>
    </head>
    <body>
        <h2 class="pass1"><strong>九九乘法表</strong></h2>
        <div class="tbl" id="tbl">
            <script>
                $(document).ready(function(){
                    for(var i=1;i<=9;i++){
                        for(var j=1;j<=i;j++){
                        var table1=document.getElementById("tbl");
                        var newp=document.createElement("span");
                        let result=i*j;
                        table1.appendChild(newp);
                        newp.innerHTML=i+"*"+j+"="+result+" ";
                        }
                        var newp2=document.createElement("p");
                        table1.appendChild(newp2);
                    }
                });
            </script>   
        </div>
        <div>
            <input id="btn1" type="button" value="等腰三角形" >
            <input id="btn2" type="button" value="直角三角形" >
        </div>
        <script>
            $("#btn1").click(function(){
                $("body").css("text-align","center");
            });
            $("#btn2").click(function(){
                $("body").css("text-align","none");
            });
        </script>
    
    
    <div class="d">
        <p id="ke">科学家介绍</p>
        <div class="e">
        <div class="ads">
            <img src="../ads.jpg"/>
            托马斯·阿尔瓦·爱迪生（Thomas Alva Edison，1847年2月11日—1931年10月18日），出生于美国俄亥俄州米兰镇，逝世于美国新泽西州西奥兰治。
            世界著名的发明家、物理学家、企业家，拥有众多知名重要的发明专利超过2000项，被传媒授予“门洛帕克的奇才”称号!
            爱迪生是人类历史上第一个利用大量生产原则和电气工程研究的实验室来进行从事发明专利而对世界产生深远影响的人。他发明的留声机、电影摄影机和电灯对世界有极大影响。
            他拥有超过2000项发明，包括对世界极大影响的留声机、电影摄影机、钨丝灯泡等。在美国，爱迪生名下拥有1093项专利，而他在英国、法国、德国等地的专利数累计超过1500项。
        </div>
        <div class="lbnc">
            <img src="../lbnc.jpg"/>
            戈特弗里德·威廉·莱布尼茨（Gottfried Wilhelm Leibniz，1646年7月1日－1716年11月14日），德国哲学家、数学家，历史上少见的通才，被誉为十七世纪的亚里士多德。
            他本人是一名律师，经常往返于各大城镇，他许多的公式都是在颠簸的马车上完成的，他也自称具有男爵的贵族身份。
            莱布尼茨在数学史和哲学史上都占有重要地位。
            在数学上，他和艾萨克·牛顿先后独立发现了微积分，而且他所使用的微积分的数学符号被更广泛的使用，莱布尼茨所发明的符号被普遍认为更综合，适用范围更加广泛。
            莱布尼茨还发现并完善了二进制。
        </div>
    </div>
    <div class="f">
        <div class="newton">
            <img src="../newton.png"/>
            艾萨克·牛顿（1643年1月4日—1727年3月31日）爵士，英国皇家学会会长，英国著名的物理学家，百科全书式的“全才”，著有《自然哲学的数学原理》、《光学》。
            他在1687年发表的论文《自然定律》里，对万有引力和三大运动定律进行了描述。这些描述奠定了此后三个世纪里物理世界的科学观点，并成为了现代工程学的基础。
            他通过论证开普勒行星运动定律与他的引力理论间的一致性，展示了地面物体与天体的运动都遵循着相同的自然定律；
            为太阳中心说提供了强有力的理论支持，并推动了科学革命。
        </div>
        <div class="tsl">
            <img src="../tsl.jpg"/>
            尼古拉·特斯拉（Nikola Tesla，1856年7月10日—1943年1月7日），塞尔维亚裔美籍发明家、物理学家、机械工程师、电气工程师。
            1895年，他替美国尼亚加拉发电站制造发电机组，该发电站至今仍是世界著名水电站之一。
            1897年，他使马可尼的无线电通信理论成为现实。1898年，他制造出世界上第一艘无线电遥控船，无线电遥控技术取得专利。
            1899年，他发明了X光（X-Ray）摄影技术。其他发明包括：收音机、传真机、真空管、霓虹灯管、飞弹导航等。
            以他的名字命名了磁密度单位（1Tesla=10000Gause），表明他在磁学上的贡献。
        </div>
        <div class="clear"></div>
    </div>
    </div>
    <div class="g">
        <p id="lian">联系我们</p>
        <div class="fang"><dl>
            <dt class="call">联系方式</dt>
            <dd>地址：河南省信阳时浉河区南湖路237号</dd>
            <dd>邮编：454000</dd>
            <dd>网址：http://www.xynu.edu.cn/</dd>
            <dd>网址：http://www.xynu.edu.cn/</dd>
            <dd>电话：12345678910</dd>
        </dl></div>
        <div class="online">
            <h1>在线提问</h1>
            <table width="500">
                <tr>
                    <td>姓名</td>
                    <td><input type="text"></td>
                </tr>
                <tr>
                    <td>电子邮箱</td>
                    <td><input type="text"></td>
                </tr>
                <tr>
                    <td>内容</td>
                    <td><textarea rows="3" cols="20"></textarea></td>
                </tr>
                <tr>
                    <td><input type="button" value="提交"></td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>